<template>
  <div class="user-list">
    <a-list
      item-layout="horizontal"
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }"
      :data-source="props.userList"
    >
      <template #renderItem="{ item }">
        <a-list-item>
          <a-card hoverable style="margin-right: 10px">
            <template #cover>
              <img
                alt="example"
                style="width: 100%; height: 150px; object-fit: cover"
                :src="item.avatarUrl"
              />
            </template>
            <a-card-meta>
              <template #description>
                <span v-html="item.intro" />
              </template>
              <template #title>
                <span v-html="item.userName" />
              </template>
            </a-card-meta>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { defineProps, withDefaults } from "vue";

interface Props {
  userList: any[];
}

const props = withDefaults(defineProps<Props>(), {
  userList: () => [],
});
</script>
